<template>
	<div class="video-list-item" @click="videoItemClick">
	  <!-- 视频封面 -->
	  <div class="item-img" @mouseenter="showIcon" @mouseleave="closeIcon">
		<img :src="showImg" alt="" />
		<!-- 播放图标遮罩层 -->
		<transition name="el-fade-in-linear">
		  <div class="mask-playicon" v-show="isShowPlay">
			<span class="iconfont icon-play"></span>
		  </div>
		</transition>
		<!-- 播放量 -->
		<transition name="el-zoom-in-top">
		  <div class="play-icon" >
			<span class="iconfont icon-play-square"></span>
			<span>{{ formatPlayCount }}</span>
		  </div>
		</transition>
		<!-- 时长 -->
		<transition name="el-zoom-in-bottom">
		  <div class="playduration" >
			<span>{{ formatDuration }}</span>
		  </div>
		</transition>
	  </div>
	  <!-- 视频介绍 -->
	  <div class="item-text">
		<div class="twoLine">
		  {{ videolistitem.name || videolistitem.title || videolistitem.data.title || videolistitem.data.name }}
		</div>
		<div class="by">by{{ showAuthor }}</div>
	  </div>
	</div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  
 
  const props = defineProps({
	videolistitem: {
	  type: Object,
	  default: () => ({}),
	}
  })
  
  // 响应式数据
  const isShowIcon = ref(true) // 控制播放量和时长的显示与隐藏
  const isShowPlay = ref(false) // 控制播放图标的显示与隐藏
  
  // 计算属性：封面图片
  const showImg = computed(() => {
	return props.videolistitem.cover || props.videolistitem.imgurl16v9 || props.videolistitem.picUrl || props.videolistitem.coverUrl || props.videolistitem.data.coverUrl
  })
  
  // 计算属性：作者信息
  const showAuthor = computed(() => {
	const videolistitem = props.videolistitem
	if (videolistitem.id) {
	  return videolistitem.artistName
	} else if (videolistitem.data) {
	  if (videolistitem.data.artists) {
		return videolistitem.data.artists[0].name
	  } else {
		return videolistitem.data.creator.nickname
	  }
	} else if (videolistitem.vid) {
	  return videolistitem.creator[0].userName
	}
	return ''
  })
  
  // 格式化播放量/播放时间
  const formatPlayCount = computed(() => {
	const count = props.videolistitem.playCount || props.videolistitem.playTime || props.videolistitem.data.playTime || props.videolistitem.data.playCount
	return formatNum(count)
  })
  
  // 格式化时长
  const formatDuration = computed(() => {
  const duration = props.videolistitem?.duration || 
                   props.videolistitem?.durationms || 
                   props.videolistitem?.data?.durationms || 
                   props.videolistitem?.data?.duration;
  return formatDurationFunc(duration)
})

  // 格式化数字的方法
  function formatNum(num) {
	if (num >= 10000) {
	  return (num / 10000).toFixed(1) + 'W'  // 格式化为百万
	} else if (num >= 1000) {
	  return (num / 1000).toFixed(1) + 'K'   // 格式化为千
	} else {
	  return num
	}
  }
  
  // 格式化时长的方法
  function formatDurationFunc(ms) {
	if (!ms) return '00:00'
	const minutes = Math.floor(ms / 60000)
	const seconds = Math.floor((ms % 60000) / 1000)
	return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`
  }
  
  // 控制播放量和时长的显示与隐藏
  const showIcon = () => {
	isShowIcon.value = false
	isShowPlay.value = true
  }
  
  const closeIcon = () => {
	isShowIcon.value = true
	isShowPlay.value = false
  }
  
  // 视频点击事件
  const videoItemClick = () => {
	const videolistitem = props.videolistitem
	if (videolistitem.data) {
	  if (videolistitem.data.videoGroup[0].type == 0) {
		router.push({
		  name: 'VideoDetail',
		  params: { id: videolistitem.data.id, type: 'mv' },
		})
	  } else {
		router.push({
		  name: 'VideoDetail',
		  params: { id: videolistitem.data.vid, type: 'video' },
		})
	  }
	} else if (videolistitem.id) {
	  router.push({
		name: 'VideoDetail',
		params: { id: videolistitem.id, type: 'mv' },
	  })
	} else if (videolistitem.vid) {
	  if (videolistitem.type == 0) {
		router.push({
		  name: 'VideoDetail',
		  params: { id: videolistitem.vid, type: 'mv' },
		})
	  } else {
		router.push({
		  name: 'VideoDetail',
		  params: { id: videolistitem.vid, type: 'video' },
		})
	  }
	}
	// 重置显示状态
	isShowIcon.value = true
	isShowPlay.value = false
  }
  </script>
  

  
<style lang="less" scoped>
.video-list-item {
	padding-bottom: 0px;
	width: 100%;
	cursor: pointer;
	border-radius: 18px;
		overflow: hidden; /* 防止内容溢出 */
	.item-img {
		position: relative;
		border-radius: 18px;
		overflow: hidden; /* 防止内容溢出 */
		img {
			width: 100%;
			height: 180px;
		}
		.play-icon {
			position: absolute;
			top: 0;
			right: 0;
			height: 30px;
			line-height: 30px;
			background: rgba(100, 100, 100, 0.5);
			color: #fff;
			padding: 0 5px;
		}
		.playduration {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 30px;
			line-height: 30px;
			background: rgba(100, 100, 100, 0.5);
			color: #fff;
			span {
				padding: 5px;
			}
		}
	}

	.item-text {
		padding: 10px 10px;
		.by {
			padding-top: 5px;
		}
	}
}
</style>
